<template>
<div class='news'>
  <div class="news-header">消息</div>
  <ul>
    <li>
      <div class="left">
        <div class="head">
          <span>1</span>
        </div>
      </div>
      <div class="right">
        <div class="name">
          <h3>系统通知</h3>
          <b>2021-11-25 14:07</b>
        </div>
        <div class="message">你好</div>
      </div>
    </li>
    <li></li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {}
  },
}
</script>

<style lang='less' scoped>
*{
  margin: 0;
  padding: 0;
}
  .news{
    width: 100%;
    height: 100%;
    background-color: rgb(242, 242, 242);
    .news-header{
      padding: 0 50px;
      margin-top: 20px;
      height: 60px;
      font-size: 20px;
      background-color: #fff;
      line-height: 40px;
    }
    ul{
      width: 100%;
      li{
        height: 180px;
        background-color: #fff;
        border-top: 1px solid #ccc;
        padding: 0 40px;
        display: flex;
        .left{
          width: 20%;
          padding-top: 20px;
          .head{
            width: 100px;
            height: 100px;background-color: cadetblue;
            border-radius: 50%;
            position: relative;
            span{
              position: absolute;
              width: 30px;
              height: 30px;
              background-color: red;
              color: #fff;
              border-radius: 50%;
              text-align: center;
              right: 10px;
              top: -5px;
            }
          }
        }
        .right{
          width: 80%;
          padding-top: 20px;
          .name{
            display: flex;
            justify-content: space-between;
            h3{
              font-size: 14px;
            }
            b{
              font-weight: normal;
              color: #ccc;
            }
          }
          .message{
            color: #ccc;
            margin-top: 10px;
            font-size: 16px;
          }
        }
      }
    }
  }
</style>
